<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
    >
      <el-row>
        <el-col :span="16">
          <el-form-item label="批号" prop="batchNo">
            <el-input
              v-model="queryParams.batchNo"
              placeholder="请输入批号"
              clearable
            />
          </el-form-item>
          <el-form-item label="目标类型" prop="flightType">
            <el-input
              v-model="queryParams.flightType"
              placeholder="请输入目标类型"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >查询</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
        <el-col :span="8"
          ><h3>当前关联总批数：12879</h3></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="通道类型" prop="sourceId">
            <el-select
              v-model="queryParams.sourceId"
              placeholder="请选择通道类型"
            >
              <el-option
                v-for="item in channels"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="起始时间" prop="startTime">
            <el-date-picker
              v-model="queryParams.startTime"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm"
              placeholder="选择日期时间"
              :value-format="'yyyy-MM-dd HH:mm'"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="截止时间" prop="endTime">
            <el-date-picker
              v-model="queryParams.endTime"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间"
              :value-format="'yyyy-MM-dd HH:mm'"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="8">
      <el-col :span="12">
        <div style="height: 450px" ref="lineCharts" id="lineCharts"></div>
      </el-col>
      <el-col :span="12">
        <div style="height: 420px" ref="heatMap" id="heatMap"></div>
        <div>
          <el-radio-group v-model="tabPosition" @change="handleTabPosition">
            <el-radio-button label="line" style="width: 50%"
              >航线图</el-radio-button
            >
            <el-radio-button label="hot" style="width: 50%"
              >热力图</el-radio-button
            >
          </el-radio-group>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="8" style="margin-top: 20px">
      <el-col :span="12">
        <el-row>
          <el-col :span="24">
            <span style="margin-right: 10px"
              >局部修正:<i class="el-icon-setting" style="color: #1890ff"></i
            ></span>
            <span style="margin-right: 10px"
              >单批修正:<i class="el-icon-setting" style="color: #1890ff"></i
            ></span>
            <span style="margin-right: 10px"
              >pd修正:<i class="el-icon-setting" style="color: #1890ff"></i
            ></span>
          </el-col>
        </el-row>
        <el-table v-loading="loading" :data="leftTableList">
          <el-table-column
            prop="batchNo"
            label="批号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="sendTime"
            label="时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="DDistance"
            label="经纬度坐标"
            align="center"
          ></el-table-column>
          <el-table-column
            label="定位精度"
            align="center"
            prop="locationDeviation"
          ></el-table-column>
          <el-table-column
            label="距离精度(Abs)"
            align="center"
            prop="distanceDeviation"
          ></el-table-column>
          <el-table-column
            label="距离精度"
            align="center"
            prop="distanceDeviationUnAbs"
          ></el-table-column>
          <el-table-column
            label="方位精度(Abs)"
            align="center"
            prop="directionDeviation"
          ></el-table-column>
          <el-table-column
            label="方位精度"
            align="center"
            prop="directionDeviationUnAbs"
          ></el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <el-table v-loading="loading" :data="newTableData">
          <el-table-column
            prop="batchNo"
            label="批号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="relatedTrackNum"
            label="关联点数"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="relatedDistance"
            label="关联航程"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="relatedTrackTime"
            label="关联时长"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="locationDeviation"
            label="定位精度"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="distanceDeviation"
            label="距离精度(Abs)"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="distanceDeviationUnAbs"
            label="距离精度"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="directionDeviation"
            label="方位精度(Abs)"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="directionDeviationUnAbs"
            label="方位精度"
            align="center"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="modifyHandle1(scope.row)"
                >修正</el-button
              >
              <el-button
                v-if="scope.row.parentId != 0"
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDisplayMap(scope.row)"
                >展示</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="margin-top: 20px">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleExport"
          >区域导出</el-button
        >
      </el-col>
    </el-row>
    <el-row style="margin-top: 10px">
      <el-col :span="24">
        <el-table v-loading="loading" :data="historyArea">
          <el-table-column
            prop="areaId"
            label="区域编号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="radarArea"
            label="区域名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="correctRate"
            label="关联正确率"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="locationDeviation"
            label="定位精度"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="distanceDeviation"
            label="距离精度(Abs)"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="distanceDeviationUnAbs"
            label="距离精度"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="directionDeviation"
            label="方位精度(Abs)"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="directionDeviationUnAbs"
            label="方位精度"
            align="center"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="modifyHandle(scope.row)"
                >修正</el-button
              >
              <el-button
                v-if="scope.row.parentId != 0"
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDisplayMapModal(scope.row)"
                >展示</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "@/assets/styles/dataoverview.scss";
import moment from "moment";
import { worldMap } from "@/assets/mapJson/worldMap";
import { nameMapData } from "@/assets/mapJs/common";
import ShowModal from "./compoments/showModal";
//注册中国地图
echarts.registerMap("worldMap", worldMap, {});
import {
  getDataoverViewList,
  getListPathByFlightType,
  getDict,
  getFlightFrequencyList,
  getListByUniqueBatchNoList,
  getListAreaStat,
  exportAreaStat,
  getStatAreaHourDeviation,
  getRadarBatchList,
} from "@/api/service";
export default {
  name: "",
  components: {},
  data() {
    return {
      loading: false,
      // 显示搜索条件
      showSearch: true,
      tabsValue: "",
      messageRelate: null, //关联值
      tabPosition: "hot",
      channels: [],
      dataVolumes: [],
      hotDoatData: [], //热力图数据
      listDatas: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        startTime: moment().subtract(1, "days").format("YYYY-MM-DD HH:mm"),
        endTime: moment(new Date()).format("YYYY-MM-DD HH:mm"),
        sourceId: "8203",
        batchNo: '',
        flightType: '',
        realFlag: false,
        targetTypes: '',
      },
      sjzl: 0,
      mapGeoData: null,
      forChartsMapData: [],
      echartsData: [],
      selectStartMonth: moment().startOf("month").format("YYYY-MM-DD"),
      selectEndMonth: moment().endOf("month").format("YYYY-MM-DD"),
      graph: null,
      data: [],
      newDataPlane: [],
      flightDotData: [],
      historyArea: [],
      leftEchartsData: [],
      leftTableList: [],
      tableNowDataList: [],
      total: 0,
      total2: 0,
      showHistoryList: [],
      showHistoryList1: [],
      showHistoryList2: [],
      dataList: [],
      sourceId: "8203",
      newTableData: [], //实时右边表格
      //展示弹窗
      modalListFromArea: [],
      modelOpen: false,
    };
  },
  mounted() {
    getDict("channel_type").then((res) => {
      console.log("channel_type", res.data);
      if (res.code === 200) {
        const data = res.data.map((item) => {
          return {
            value: item.dictValue,
            label: item.dictLabel,
          };
        });
        this.channels = data;
      }
    });
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      //line  lineCharts
      const lineCharts = echarts.init(this.$refs.lineCharts);
      let lineOption = {
        //动画
        animation: true,
        animationThreshold: 2000,
        animationDuration: 1000,
        animationEasing: "cubicOut",
        animationDelay: 0,
        animationDurationUpdate: 300,
        animationEasingUpdate: "cubicOut",
        animationDelayUpdate: 0,
        backgroundColor: "#1a203a",
        legend: {
          show: true,
          textStyle: {
            color: "#fff",
          },
          right: "20",
          left: "20",
          // top: '20',
        },
        title: {
          text: "实时评估分析",
          textStyle: {
            color: "#fff",
          },
          left: "center",
        },
        tooltip: {
          position: "top",
          trigger: "axis",
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
          },
        },
        grid: {
          bottom: "11%",
          right: "6%",
          top: "15%",
          left: "8%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          name: "时间",
          nameLocation: "end",
          nameTextStyle: {
            color: "#fff",
          },
          data: this.newDataPlane?.map((item) => item?.sendTime),
          boundaryGap: false,
        },
        yAxis: [
          {
            type: "value",
            name: "定位和距离偏差",
          },
          {
            type: "value",
            name: "方位偏差",
            // min: 0, //minData2
            max: 1, //maxData2
            splitNumber: 5,
            interval: (1 - 0) / 5, //maxData2-minData2
            axisLabel: {
              formatter: function (v) {
                return v.toFixed(2); //0表示小数为0位，1表示1位小数，2表示2位小数
              },
            },
          },
        ],
        dataZoom: [
          {
            type: "inside",
            orient: "vertical",
          },
          {
            type: "slider",
          },
          {
            type: "slider",
            show: true,
            // xAxisIndex: 0
            handleSize: 0,
            startValue: 0,
            endValue: 500,
            height: 1,
            left: "10%",
            right: "10%",
            bottom: 3,
            borderColor: "#ccc",
            fillerColor: "#1a203a",
            borderRadius: 3,
            backgroundColor: "#1a203a",
            showDataShadow: false,
            showDetail: false,
            realtime: true,
            filterMode: "filter",
          },
        ],
        series: [
          {
            name: "定位精度",
            type: "line",
            symbol: "roundRect",
            // smooth: true,//是否是光滑曲线
            markLine: {
              itemStyle: {
                normal: {
                  label: {
                    formatter: "偏差调整",
                  },
                },
              },
              lineStyle: {
                color: "yellowGreen",
              },
              yAxisIndex: 0,
              symbol: "none",
            },
            data: this.newDataPlane?.map((item) => item?.locationDeviation),
          },
          {
            name: "距离精度",
            type: "line",
            symbol: "roundRect",
            // smooth: true,//是否是光滑曲线
            markLine: {
              itemStyle: {
                normal: {
                  label: {
                    formatter: "偏差调整",
                  },
                },
              },
              lineStyle: {
                color: "yellowGreen",
              },
              yAxisIndex: 0,
              symbol: "none",
            },
            data: this.newDataPlane?.map(
              (item) => item?.distanceDeviationUnAbs
            ),
          },
          {
            name: "方位精度",
            type: "line",
            symbol: "roundRect",
            // smooth: true,//是否是光滑曲线
            markLine: {
              itemStyle: {
                normal: {
                  label: {
                    formatter: "偏差调整",
                  },
                },
              },
              lineStyle: {
                color: "yellowGreen",
              },
              symbol: "none",
            },
            yAxisIndex: 1,
            data: this.newDataPlane?.map(
              (item) => item?.directionDeviationUnAbs
            ),
          },
        ],
      };
      document
        .getElementById("lineCharts")
        .removeAttribute("_echarts_instance_");
      lineCharts.setOption(lineOption);

      //热力图
      const heatMap = echarts.init(this.$refs.heatMap);
      let heatMapOption;
      if (this.tabPosition == "line") {
        console.log("echarts line");
        heatMapOption = {
          backgroundColor: "#1a203a",
          title: {
            text: "航迹叠加图",
            subtext: "",
            left: "center",
            textStyle: {
              color: "#fff",
            },
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            top: "bottom",
            left: "right",
            textStyle: {
              color: "#fff",
            },
            selectedMode: "multiple",
          },
          nameMap: nameMapData,
          geo: {
            map: "worldMap",
            label: {
              emphasis: {
                show: true,
                color: "#fff",
              },
            },
            regions: [
              {
                name: "南海诸岛",
                itemStyle: {
                  // 隐藏地图
                  normal: {
                    opacity: 0, // 为 0 时不绘制该图形
                  },
                },
                label: {
                  show: false, // 隐藏文字
                  fontSize: 0,
                },
              },
            ],
            // 把中国地图放大了1.2倍
            zoom: _zoom,
            roam: true,
            animationDurationUpdate: 0,
            center: _center,
            itemStyle: {
              normal: {
                // 地图省份的背景颜色
                areaColor: "rgba(20, 21, 87,0.6)",
                borderColor: "#195BB9",
                borderWidth: 1,
              },
              emphasis: {
                areaColor: "#2B91B7",
              },
            },
          },
          series: this.flightDotData.length > 0 ? this.seriesFormatShow() : {},
        };
      } else {
        console.log("echarts hot");
        heatMapOption = {
          backgroundColor: "#0e2e50",
          title: {
            // text: '热力图',
            subtext: "",
            left: "center",
            textStyle: {
              color: "#fff",
            },
          },
          legend: {
            show: false,
          },
          tooltip: {
            trigger: "item",
            formatter: function (params) {
              return `经度: ${params?.value[0]}<br />纬度: ${params?.value[1]}`;
            },
          },
          visualMap: {
            show: true,
            type: "continuous",
            min: 0,
            max: 10,
            calculable: true,
            orient: "vertical",
            left: "left",
            bottom: "15%",
            dimension: 1,
            inRange: {
              color: ["blue", "yellow", "red"],
            },
          },
          nameMap: nameMapData,
          geo: {
            map: "worldMap",
            label: {
              emphasis: {
                show: false,
              },
            },
            regions: [
              {
                name: "211",
                itemStyle: {
                  // 隐藏地图
                  normal: {
                    opacity: 0, // 为 0 时不绘制该图形
                  },
                },
                label: {
                  show: false, // 隐藏文字
                  fontSize: 0,
                },
              },
            ],
            // 把中国地图放大了1.2倍
            zoom: 8, //15
            roam: true,
            center: [134.775265, 38.849163],
            itemStyle: {
              normal: {
                areaColor: "rgba(20, 41, 87,0.6)",
                borderColor: "#195BB9",
                borderWidth: 1,
              },
              emphasis: {
                areaColor: "#2B91B7",
              },
            },
          },
          series: [
            {
              type: "heatmap",
              coordinateSystem: "geo",
              data: this.hotDoatData,
              pointSize: 10, //设置热力图上的点大小
              symbolSize: 200,
              blurSize: 10,
              // progressive: 400
            },
            {
              // name: '基地',
              type: "effectScatter",
              coordinateSystem: "geo",
              data: this.convertData(this.forChartsMapData),
              colorBy: "data",
              zlevel: 2,
              rippleEffect: {
                color: "#7ed3f4",
                period: 4,
                scale: 4,
                brushType: "stroke",
              },
              symbolSize: 6,
              symbol: "circle",
              label: {
                normal: {
                  show: true, //显示市区标签
                  textStyle: { color: "#ccc", fontSize: "16px" }, //省份标签字体颜色
                  formatter: (params) => {
                    return params?.data?.[3];
                  },
                  position: ["-130%", "150%"],
                },
                emphasis: {
                  //对应的鼠标悬浮效果
                  show: false, //关闭文字 （这东西有问题得关）
                  textStyle: { color: "transparent" },
                },
              },
            },
          ],
        };
      }
      document.getElementById("heatMap").removeAttribute("_echarts_instance_");
      heatMap.setOption(heatMapOption);
    },

    //历史的区域修正
    modifyHandle() {},

    //历史的区域展示
    handleDisplayMapModal(row) {
      let data = {
        areaId: row.areaId,
        endTime: this.queryParams.endTime,
        startTime: this.queryParams.startTime,
        sourceId: this.queryParams.sourceId,
      };
      getStatAreaHourDeviation(data).then((res) => {
        if (res.code === 200) {
          this.modalListFromArea(res.data);
          this.modelOpen = true;
        }
      });
    },

    handleExport() {
      let data = {
        startTime: this.queryParams.startTime,
        endTime: this.queryParams.endTime,
        sourceId: this.queryParams.sourceId,
      };
      exportAreaStat(data).then((res) => {});
    },
    seriesFormatShow() {
      let series = [];
      this.flightDotData &&
        this.flightDotData
          .filter((item) => {
            return item?.length > 0;
          })
          //过滤数据空的航迹点
          .map((iten) => {
            if (iten.length > 1) {
              series.push(
                {
                  type: "lines", //第一条实线
                  coordinateSystem: "geo", // 这句的意思是连线是基于地理坐标的,geo组件将在下面给出
                  polyline: true, // 这表示连线是否为多端点的连线
                  data: [
                    {
                      coords: iten,
                    },
                  ],
                  lineStyle: {
                    color: "block",
                    width: 2,
                  },
                  effect: {
                    //线特效，小飞机
                    constantSpeed: 10,
                    show: true,
                    color: "yellow", //#00EAFF
                    symbolSize: 15,
                    symbol: planePath,
                  },
                  progressiveThreshold: 500,
                  progressive: 200,
                },
                {
                  type: "lines", //第二条虚线
                  coordinateSystem: "geo", // 这句的意思是连线是基于地理坐标的,geo组件将在下面给出
                  polyline: true, // 这表示连线是否为多端点的连线
                  data: [
                    {
                      coords: iten,
                    },
                  ],
                  lineStyle: {
                    color: "#fff",
                    width: 2,
                    type: "dashed",
                  },
                  progressiveThreshold: 500,
                  progressive: 200,
                }
              );
            }
          });

      this.flightDotData1 &&
        this.flightDotData1
          .filter((item) => {
            return item?.length > 0;
          })
          .map((iten) => {
            if (iten.length > 1) {
              series.push(
                {
                  type: "lines", //第一条实线
                  coordinateSystem: "geo", // 这句的意思是连线是基于地理坐标的,geo组件将在下面给出
                  polyline: true, // 这表示连线是否为多端点的连线
                  data: [
                    {
                      coords: iten,
                    },
                  ],
                  lineStyle: {
                    color: "block",
                    width: 2,
                  },
                  effect: {
                    //线特效，小飞机
                    constantSpeed: 10,
                    show: true,
                    color: "red", //#00EAFF
                    symbolSize: 15,
                    symbol: planePath,
                  },
                  progressiveThreshold: 500,
                  progressive: 200,
                },
                {
                  type: "lines", //第二条虚线
                  coordinateSystem: "geo", // 这句的意思是连线是基于地理坐标的,geo组件将在下面给出
                  polyline: true, // 这表示连线是否为多端点的连线
                  data: [
                    {
                      coords: iten,
                    },
                  ],
                  lineStyle: {
                    color: "#fff",
                    width: 2,
                    type: "dashed",
                  },
                  progressiveThreshold: 500,
                  progressive: 200,
                },
                {
                  // name: '基地',
                  type: "effectScatter",
                  coordinateSystem: "geo",
                  data: convertData(forChartsMapData),
                  colorBy: "data",
                  zlevel: 2,
                  rippleEffect: {
                    period: 4,
                    scale: 4,
                    brushType: "stroke",
                  },
                  symbolSize: 6,
                  symbol: "circle",
                  label: {
                    normal: {
                      show: true, //显示市区标签
                      textStyle: { color: "#ccc", fontSize: "16px" }, //省份标签字体颜色
                      formatter: (params) => {
                        return params?.data?.[3];
                      },
                      position: ["-130%", "150%"],
                    },
                    emphasis: {
                      //对应的鼠标悬浮效果
                      show: false, //关闭文字 （这东西有问题得关）
                      textStyle: { color: "transparent" },
                    },
                  },
                  // itemStyle: {
                  //   normal: {
                  //     borderWidth: 7, //区域边框宽度
                  //     borderColor: '#fc8452', //区域边框颜色
                  //     areaColor: '#fc8452', //区域颜色
                  //   },
                  // },
                }
              );
            }
          });

      series.push({
        type: "lines",
        polyline: true,
        coordinateSystem: "geo",
        lineStyle: {
          type: "dashed",
          color: "yellowGreen",
          width: 2,
          opacity: "0.5",
        },
        effect: {
          show: true,
          trailLength: 0.1,
          symbol: "none",
          symbolSize: 8,
        },
        data: this.historyArea,
      });
      return series;
    },
    getHistoryListAreaStat() {
      getListAreaStat(this.queryParams).then((res) => {
        if (res.code === 200) {
          this.historyArea = res.data;
        }
      });
    },

    //历史关联数据
    handleDisplayMap(record) {
      let data = {
        uniqueBatchNo: record?.uniqueBatchNo,
      };
      getListByUniqueBatchNoList(data).then((res) => {
        console.log(502, res);
        if (res.code == 200) {
          this.leftEchartsData = res.data?.locationRadarDeviations || [];
          let showItnerList = res.data?.locationRadar?.map((item) => {
            return [item?.longitude, item?.latitude, item?.locationDeviation];
          });
          let showItnerList1 = res.data?.locationRadar?.map((item) => {
            return [item?.longitude, item?.latitude];
          });
          //添加辅助飞行线
          let showItnerList2 = res.data?.locationReals?.map((item) => {
            return [item?.longitude, item?.latitude];
          });
          this.leftTableList = res.data?.locationRadarDeviations || [];
          this.newDataPlane = res.data?.locationRadarDeviations
            ? res.data?.locationRadarDeviations.reverse()
            : [];
          if (historyList.length > 0) {
            this.showHistoryList = showItnerList;
            this.showHistoryList1 = [showItnerList1];
            this.showHistoryList2 = [showItnerList2];
          } else {
            this.showHistoryList = [];
            this.showHistoryList1 = [];
            this.showHistoryList2 = [];
          }
        }
      });
    },
    //切换地图
    handleTabPosition(val) {
      console.log("handleTabPosition:", val);
      if (val == "line") {
        //航线图
        this.getItineraryData();
      } else {
        //热力图
      }
    },
    //将数据处理给到航迹
    getItineraryData() {
      let data = this.newDataPlane.map((item) => {
        if (item?.longitude && item?.latitude) {
          return [item?.longitude, item?.latitude];
        }
      });
      console.log(620, data);
      this.flightDotData.push(data);
      console.log(621, this.flightDotData);
    },

    getHistory(val) {
      let data = {
        batchNo: val?.batchNo,
        realFlag: false,
        targetTypes: val?.targetTypes,
        sourceId: val?.sourceId,
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        startTime: this.queryParams.startTime,
        endTime: this.queryParams.endTime
      };
      getRadarBatchList(data).then((res) => {
        if (res.code === 200) {
          sessionStorage.setItem("tableNowList", JSON.stringify(res.rows));
          let re = JSON.parse(JSON.stringify(res.rows));
          let dataAll = JSON.parse(JSON.stringify(re));
          console.log(1045, dataAll);
          this.tableNowDataList = dataAll;
          sthis.total2 = res.total;
          this.newDataPlane = JSON.parse(JSON.stringify(re.reverse()));
        }
      });
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getHistory(this.queryParams)
      this.getHistoryListAreaStat();
    },
    filterData(value) {
      let data =
        this.frequencyData &&
        this.frequencyData.filter((item) => {
          return item?.dictValue == value;
        });
      console.log("filterData", data[0]?.dictLabel, frequencyData);
      return data[0]?.dictLabel;
    },
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.mapGeoData[data[i].name];
        if (geoCoord) {
          res.push(geoCoord.concat(data[i].value).concat(data[i].name));
        }
      }
      return res;
    },
    getMonths() {
      const moment = require("moment");
      for (let i = 2; i >= 0; i--) {
        let lastMonth = moment().subtract(i, "months").month() + 1;
        this.marks.forEach((item) => {
          if (item.value === lastMonth) {
            this.monthList.push(item.label);
          }
        });
      }
      this.tabsValue = this.monthList[this.monthList.length - 1]; // 默认当月
      console.log("getMonths:", this.tabsValue);
      this.selectSemented(this.tabsValue);
    },
    selectSemented(val) {
      let year = moment().get("year");
      let month = 0;
      this.marks.forEach((item) => {
        if (item.label === val) {
          console.log(item.value.toString().length);
          month =
            item.value.toString().length < 2
              ? "0" + item.value.toString()
              : item.value.toString();
        }
      });
      let data = {
        statMonth: `${year}-${month}`,
      };
      this.selectStartMonth = moment(`${year}-${month}-01`)
        .startOf("month")
        .format("YYYY-MM-DD");
      this.selectEndMonth = moment(`${year}-${month}-01`)
        .endOf("month")
        .format("YYYY-MM-DD");
      // this.setSelectTimeValue(data);
      this.getPageData(data);
    },
    setSelectTimeValue() {},
    getPageData(data) {
      getDataoverViewList(data).then((res) => {
        console.log('getPageData',res);
        this.barChartsData = { label: [], value: [] };
        this.rabarChartsData = [];
        if (res.code == 200 && res?.data) {
          res.data.dataVolumes.forEach((item) => {
            switch (item.statType) {
              case 0:
                this.sjzl = item.statValue;
                break;
              case 2:
                this.dataVolumes.jcsjj = item.statValue;
                break;
              case 4:
                this.dataVolumes.zlsjj = item.statValue;
                break;
              case 7:
                this.dataVolumes.cssjj = item.statValue;
                break;
              case 5:
                this.dataVolumes.cjsjj = item.statValue;
                break;
              default:
                this.dataVolumes.ctj = item.statValue;
            }
          });
          let params = {
            startTime:
              moment(data.statMonth).startOf("month").format("YYYY-MM-DD") ||
              moment().startOf("month").format("YYYY-MM-DD"),
            endTime:
              moment(data.statMonth).endOf("month").format("YYYY-MM-DD") ||
              moment().endOf("month").format("YYYY-MM-DD"),
            flightType: res?.data?.targetTypeTops?.[0]?.flightType,
          };
          if (res?.data?.targetTypeTops?.[0]?.flightType) {
            console.log(411, params);
            // getFrequencyListHandle(params);
            this.handleGetListPathByFlightType(params);
            let echartsData = (this.echartsData = res.data.targetTypeTops.slice(
              0,
              5
            ));
            console.log("echartsdata:", echartsData);
            if (echartsData.length > 0) {
              echartsData.forEach((item) => {
                let label = "";
                this.frequencyData.forEach((item1) => {
                  // console.log(item.flightType, "=====", item1.dictCode);
                  if (item.flightType == item1.dictCode) {
                    label = item1.dictLabel;
                  } else {
                    label = "";
                  }
                });
                // Top6
                this.barChartsData.label.push(label);
                this.barChartsData.value.push(item.exploreNum);

                //雷达
                this.rabarChartsData.push({
                  name: label,
                  max: item.exploreNum + 30,
                });

                //扇形
                this.pieChartsData.push({
                  name: label,
                  value: item.exploreNum,
                });

                // 词云图
                this.wordChartsData.push({
                  name: label,
                  value: Math.sqrt(item.exploreNum * 0.4) * 5,
                });
              });
              this.initEcharts();
            }
          }
        } else {
          this.$modal.msgSuccess("未查询到数据");
        }
      });

      let params = {
        startTime: this.selectStartMonth,
        endTime: this.selectEndMonth,
        flightType: this.frequencyData[0].dictSort,
      };
      console.log("this.frequencyData", this.frequencyData, params);
      getFlightFrequencyList(params).then((res) => {
        console.log("getFlightFrequencyList", res);
        if (res.code == 200 && res.data) {
          this.frequencyDataBar = res.data;
          let dataSource = res?.data?.frequencyNames
            .map((item, index) => {
              return {
                value: res?.data?.frequencyNums[index],
                name: res?.data?.frequencyNames[index],
              };
            })
            ?.sort((a, b) => a.value - b.value); //从小到大排序
          this.pieData = dataSource;
          this.initEchartsRight();
        }
      });
    },
    //频率
    //获取飞行航迹的展示
    handleGetListPathByFlightType(params) {
      getListPathByFlightType(params).then((res) => {
        if (res.code == 200) {
          let dataSouce3 = [];
          let dataSouce2 = res?.data
            ?.map((item) => {
              return item?.locationList?.map((iten) => {
                return [iten?.longitude, iten?.latitude, undefined];
              });
            })
            .filter((itex) => {
              return itex;
            })
            .map((itey) => {
              console.log(2222, itey);
              return dataSouce3.push(...itey);
            });
          console.log("hotDoatData:", dataSouce3);
          this.hotDoatData = dataSouce3;
          this.initEchartsHot();
        }
      });
    },
    radarBtnClick(val) {
      console.log("radarBtnClick", val);
      switch (val) {
        case "editFlowChart":
          this.$router.push({
            path: "/dataAnalysis/editFlowChart",
            query: {},
          });
          break;
        case "radarSpectrum":
          this.$router.push({
            path: "/dataAnalysis/spotevalution8203",
            query: {},
          });
          break;
        case "radarPlot":
          this.$router.push({
            path: "/dataAnalysis/spotevalutionyangben",
            query: {},
          });
          break;
        case "matchingRelation":
          this.$router.push({
            path: "/dataAnalysis/relateform",
            query: {},
          });
          break;
      }
    },
  },
};
</script>
<style scoped>
::v-deep .el-statistic .con .number {
  color: #c4ebff;
}
::v-deep .topH2Style .con .number {
  font-size: 32px;
}
::v-deep .el-radio-group {
  width: 100%;
}
::v-deep .el-radio-group .el-radio-button {
  width: 50%;
}
::v-deep .el-radio-group .el-radio-button .el-radio-button__inner {
  width: 100%;
}
</style>
